﻿body, html, ul, li, a, img, div {
	padding: 0;
	margin: 0;
}

@book-top: 200px;
@book-left: 230px;
@book-img-w: 140px;
@book-img-h: 200px;
@angle: 15deg;

.put-at-center() {
	position: absolute;
	height: @book-img-h + 2px;
	width: @book-img-w + 2px;
	top: 50%;
	left: 50%;
	margin-top: -1 * @book-img-h / 2;
	margin-left: -1 * @book-img-w / 2;
}

.a-box-shadow(@p) {
	-webkit-box-shadow: @p @p @p rgba(0,0,0,0.2);
	box-shadow: @p @p @p rgba(0,0,0,0.2);
}

.a-backgraund() {
	@from: 1;
	@to: 0.0;
	background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,@from), rgba(255,255,255,@to) 100%);
	background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,@from), rgba(255,255,255,@to) 100%);
	background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,@from), rgba(255,255,255,@to) 100%);
	background-image: -o-radial-gradient(circle cover, rgba(255,255,255,@from), rgba(255,255,255,@to) 100%);
	background-image: radial-gradient(circle cover, rgba(255,255,255,@from), rgba(255,255,255,@to) 100%);
	opacity: 0.9;
	.a-box-shadow(5px);
}

.rotate(@step) {
	@real-angle: (@angle * @step);
	-webkit-transform: rotate(@real-angle);
	-moz-transform: rotate(@real-angle);
	-ms-transform: rotate(@real-angle);
	-o-transform: rotate(@real-angle);
	transform: rotate(@real-angle);
}

.li-chapter() {
	border: 3px solid lighten(#5FA32C, 30%);
}

@wrapper-h: 950px;
@wrapper-w: 1300px;

@chapter-pos: -220px;

.a-chapter() {
	top: @chapter-pos;
	left: @chapter-pos;
}

@rectangle: 240px;
@ch-li-left: -50px;
@ch-li-top: -18px;

body {
	font-size: 18px;
	font-family: "trebuchet ms", helvetica, sans-serif;
	letter-spacing: -1px;

	a {
		text-decoration: none;
		color: black;
	}

	div.wrapper {
		position: relative;
		border: 1px dotted red;
		width: @wrapper-w;
		height: @wrapper-h;

		ul.radial {
			/*book container*/
			z-index: 100;
			list-style-type: none;
			.put-at-center;

			& > li > a {
				/*book anchor*/
				border: 1px solid black;
				display: block;
				width: @book-img-w;
				height: @book-img-h;
				background: #ddd;
				border-radius: 5px;
				overflow: hidden;
				text-align: center;
				.a-box-shadow(15px);
			}

			ul {
				/*chapters list*/
				z-index: -1;
				list-style-type: none;

				li {
					/*chapters items*/
					position: absolute;
					width: @rectangle;
					height: @rectangle;
					left: @ch-li-left;
					top: @ch-li-top;

					a {
						/*chapters anchor*/
						position: absolute;
						display: block;
						width: 110px;
						height: 50px;
						padding-top: 27px;
						border-radius: 50px;
						color: #000;
						background: #ddd;
						text-align: center;
						.a-backgraund;
					}

					&:nth-child(1) {
						.li-chapter;
						.rotate(0);

						a {
							//.a-chapter;
							top: @chapter-pos + 80px;
							left: @chapter-pos + 80px;
							color: #738694;
							font-style: italic;
							.rotate(0);
						}
					}

					&:nth-child(2) {
						.li-chapter;
						.rotate(1);

						a {
							.a-chapter;
							.rotate(-1);
						}
					}

					&:nth-child(3) {
						.li-chapter;
						.rotate(2);

						a {
							.a-chapter;
							.rotate(-2);
						}
					}

					&:nth-child(4) {
						.li-chapter;
						.rotate(3);

						a {
							.a-chapter;
							.rotate(-3);
						}
					}

					&:nth-child(5) {
						.li-chapter;
						.rotate(4);

						a {
							.a-chapter;
							.rotate(-4);
						}
					}

					&:nth-child(6) {
						.li-chapter;
						.rotate(5);

						a {
							.a-chapter;
							.rotate(-5);
						}
					}

					&:nth-child(7) {
						.li-chapter;
						.rotate(6);

						a {
							.a-chapter;
							.rotate(-6);
						}
					}

					&:nth-child(8) {
						.li-chapter;
						.rotate(7);

						a {
							.a-chapter;
							.rotate(-7);
						}
					}

					&:nth-child(9) {
						.li-chapter;
						.rotate(8);

						a {
							.a-chapter;
							.rotate(-8);
						}
					}

					&:nth-child(10) {
						.li-chapter;
						.rotate(9);

						a {
							.a-chapter;
							.rotate(-9);
						}
					}

					&:nth-child(11) {
						.li-chapter;
						.rotate(10);

						a {
							.a-chapter;
							.rotate(-10);
						}
					}

					&:nth-child(12) {
						.li-chapter;
						.rotate(11);

						a {
							.a-chapter;
							.rotate(-11);
						}
					}

					&:nth-child(13) {
						.li-chapter;
						.rotate(12);

						a {
							.a-chapter;
							.rotate(-12);
						}
					}

					&:nth-child(14) {
						.li-chapter;
						.rotate(13);

						a {
							.a-chapter;
							.rotate(-13);
						}
					}

					&:nth-child(15) {
						.li-chapter;
						.rotate(14);

						a {
							.a-chapter;
							.rotate(-14);
						}
					}

					&:nth-child(16) {
						.li-chapter;
						.rotate(15);

						a {
							.a-chapter;
							.rotate(-15);
						}
					}

					&:nth-child(17) {
						.li-chapter;
						.rotate(16);

						a {
							.a-chapter;
							.rotate(-16);
						}
					}

					&:nth-child(18) {
						.li-chapter;
						.rotate(17);

						a {
							.a-chapter;
							.rotate(-17);
						}
					}

					&:nth-child(19) {
						.li-chapter;
						.rotate(18);

						a {
							.a-chapter;
							.rotate(-18);
						}
					}

					&:nth-child(20) {
						.li-chapter;
						.rotate(19);

						a {
							.a-chapter;
							.rotate(-19);
						}
					}

					&:nth-child(21) {
						.li-chapter;
						.rotate(20);

						a {
							.a-chapter;
							.rotate(-20);
						}
					}

					&:nth-child(22) {
						.li-chapter;
						.rotate(21);

						a {
							.a-chapter;
							.rotate(-21);
						}
					}

					&:nth-child(23) {
						.li-chapter;
						.rotate(22);

						a {
							.a-chapter;
							.rotate(-22);
						}
					}

					&:nth-child(24) {
						.li-chapter;
						.rotate(23);

						a {
							.a-chapter;
							.rotate(-23);
						}
					}

					&:nth-child(25) {
						.li-chapter;
						.rotate(24);

						a {
							.a-chapter;
							.rotate(-24);
						}
					}

					&:nth-child(26) {
						.li-chapter;
						.rotate(25);

						a {
							.a-chapter;
							.rotate(-25);
						}
					}

					&:nth-child(27) {
						.li-chapter;
						.rotate(26);

						a {
							.a-chapter;
							.rotate(-26);
						}
					}

					&:nth-child(28) {
						.li-chapter;
						.rotate(27);

						a {
							//.a-chapter;
							top: @chapter-pos + 70px;
							left: @chapter-pos + 70px;
							color: #738694;
							font-style: italic;
							.rotate(-27);
						}
					}
				}
			}
		}
	}
}
